<template>
  <div class="content">
    <!--交货方式弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.headDelivery')"
      model
      :visible.sync="isdeliverlDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <span class="materiel-code">{{ $t('shop.name1') }}<!--名称--></span>
        <el-input v-model.trim="deliver.fname" class="input-width" size="mini" placeholder="请输入交货名称" @keyup.enter.native="deliverSearch" />
        <el-button size="mini" type="primary" @click="deliverSearch">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-data="deliverlDialogData"
        :table-header="deliverDialogHeader"
        table-height="53vh"
        serial
        @clickRow="deliverlSelectRow"
      />
      <jc-pagination
        v-show="deliver.total > 0"
        :total="deliver.total"
        :page.sync="deliver.pageNum"
        :limit.sync="deliver.pageSize"
        @pagination="queryFheadDelivery"
      />
    </el-dialog>
  </div>
</template>
<script>
import { queryViewItem } from '@/api/marketManage/marketOrder'

export default {
  data() {
    return {
      // 交货方式
      isdeliverlDialog: true,
      deliver: {
        fname: '',
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 10 // 每页显示多少条数据
      },
      deliverlDialogData: [],
      deliverDialogHeader: [
        { label: this.$t('shop.fnumber'), prop: 'fnumber' },
        { label: this.$t('shop.name1'), prop: 'fname' },
        { label: this.$t('market.note'), prop: 'dataGroupName' }
      ],
      prodValue: { fdataValue: '', fheadDeliveryWay: '', isdeliverlDialog: true }
    }
  },
  created() {
    this.queryFheadDelivery()
  },
  methods: {
    // 查询交货方式
    async queryFheadDelivery() {
      this.isdeliverlDialog = true
      const DATA = {
        viewName: 'SX_V_SAL_DELIVERY',
        ...this.deliver
      }
      const { data: RES } = await queryViewItem(DATA)
      this.deliverlDialogData = RES.list
      this.deliver.total = RES.total
    },
    deliverSearch() {
      this.deliver.pageNum = 1
      this.queryFheadDelivery()
    },
    // 选择交货方式
    deliverlSelectRow(item) {
      this.$emit('delive', item)
    },
    // 关闭前回调
    handleClose() {
      this.prodValue.isdeliverlDialog = false
      this.$emit('delive', this.prodValue)
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
